<template>
  <div class="scheduling-page">
    <breadcrumb />
    <div class="search-container">
      <Search @search="getSearchParams" />
    </div>
    <div class="table-container">
      <div class="table-component">
        <div class="submit-btns">
          <div></div>
          <div class="submit-btns-right">
            <el-button
              type="primary"
              class="submit-btn-import"
              @click="importData"
            >
              <img class="icon-img" :src="iconImport" alt="" />导入
            </el-button>
          </div>
        </div>
        <Calendar :table="table.data" :searchModel="searchModel" />
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      destroy-on-close
      :before-close="(dialogVisible = false)"
      :close-on-click-modal="false"
      :width="800"
    >
      <component
        :is="componentTag"
        @operationDone="operationDone"
        :operationId="operationId"
      >
      </component>
    </el-dialog>
  </div>
</template>
<script setup>
import breadcrumb from "@/components/breadcrumb/index.vue";
import Search from "./components/search.vue";
import Calendar from "./components/calendar.vue";
import importComponent from "./components/importComponent.vue";
import iconImport from "@/assets/image/btn/icon-import.png";
import { reactive, ref, shallowRef } from "vue";
import { getFormatDate } from "@/utils/date.js";
import { getTeamGroup } from "@/service/modules/publicModule";
import { getCalendar } from "./request.js"

// 搜索
const searchModel = ref({
  teamId: "",
  year: "",
  month: "",
});
const getSearchParams = (value) => {
  console.log("value ===>", value);
  searchModel.value = value;

  getData();
};

// 弹窗
const title = ref("");
const dialogVisible = ref(false);
const componentTag = shallowRef("");
const operationId = ref("");
const operationDone = (r) => {
  dialogVisible.value = false;
  operationId.value = "";
  if (!r) {
    getData();
  }
};

// 导入
const importData = () => {
  title.value = "导入排班信息";
  componentTag.value = importComponent;
  dialogVisible.value = true;
};

const table = reactive({
  data: [],
});

const value = ref(new Date());
const init = async () => {
  await getTeamGroup().then((res) => {
    searchModel.value.teamId = res.data.result[0].id;
  });
  // let year = getFormatDate(value.value, "YYYY");
  // let month = getFormatDate(value.value, "MM");
  searchModel.value.year = getFormatDate(value.value, "YYYY");
  searchModel.value.month = getFormatDate(value.value, "MM");
  const res = await getCalendar({
    teamId: searchModel.value.teamId,
    year: searchModel.value.year,
    month: searchModel.value.month,
  });
  if (res.data.code === 0) {
    table.data = res.data.result;
  }
};

init();

const getData = async () => {
  console.log("2 ===>", 2);

  const res = await getCalendar({
    teamId: searchModel.value.teamId,
    year: searchModel.value.year,
    month: searchModel.value.month,
  });
  if (res.data.code === 0) {
    table.data = res.data.result;
  }
};
</script>

<style lang="less" scoped>
.scheduling-page {
  .search-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px 24px 8px 24px;
    background: #fff;
    border-radius: 6px;
  }

  .table-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px;
    background: #fff;
    border-radius: 6px;

    .table-component {
      .submit-btns {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;

        .submit-btns-right {
          display: flex;
        }

        .submit-btn-import {
          background: #00d1ff;
          border: 1px solid #00d1ff;
          border-radius: 2px;
          margin-left: 12px;
          padding: 5px 16px;
        }

        .icon-img {
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }
      }
    }
  }
}
</style>